<template>
  <!-- 在这些页面里主页内容都是背景 -->
  <index />
  <!-- 从这里开始才是主要内容 -->
  <div class="container">
    <div class="head">
      <p>预定课堂设置</p>
      <hr />
    </div>
    <div class="chioce">
      <span>主题</span>
      <div class="name">
        <input type="text" placeholder="输入班级名称" v-model="className" />
      </div>
    </div>
    <div class="time">
      <span>时间</span>
      <div class="box1">
        <el-date-picker v-model="classDay" type="date" placeholder="选择日期" />
      </div>
      <div class="box1">
        <el-time-picker
          is-range
          arrow-control
          v-model="classTime"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>
      </div>
    </div>
    <div class="chioce">
      <span>人数限制</span>
      <div class="people">
        <div class="people">
          <el-select
            v-model="value"
            placeholder="请选择人数"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="chioce">
      <span>录制</span>
      <div class="box">
        <el-switch
          v-model="value3"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #808080"
        />
      </div>
    </div>
    <div class="chioce">
      <span>其他</span>
      <div class="other">
        <el-checkbox v-model="checked1" label="入会密码" size="large" />
        <el-checkbox v-model="checked2" label="入会开启摄像头" size="large" />
        <el-checkbox v-model="checked3" label="入会修改备注" size="large" />
        <el-checkbox v-model="checked4" label="聊天和互动" size="large" />
        <el-checkbox v-model="checked5" label="入会开启麦克风" size="large" />
        <el-checkbox v-model="checked6" label="自己解除静音" size="large" />
        <el-checkbox
          v-model="checked7"
          label="允许成员在主持人进会前加入会议"
          size="large"
        />
      </div>
    </div>
    <div class="footer">
      <button type="submit" @click="bookMeeting()">创建课堂</button>
    </div>
    <img src="../assets/返回.png" class="back" @click="$router.go(-1)" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          value: "1-10",
          label: "1-10",
        },
        {
          value: "10-30",
          label: "10-30",
        },
        {
          value: "30-50",
          label: "30-50",
        },
        {
          value: "50-100",
          label: "50-100",
        },
        {
          value: "100以上",
          label: "100以上",
        },
      ],
      value: "",
      value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
    };
  },
};
</script>
<script setup>
import router from "@/router";
import { inject, onMounted, ref } from "vue";
import axios from 'axios';
import store from "@/store";

const checked1 = ref(false);
const checked2 = ref(false);
const checked3 = ref(false);
const checked4 = ref(false);
const checked5 = ref(false);
const checked6 = ref(false);
const checked7 = ref(false);
const value3 = ref(true);
const shortcuts = [
  {
    text: "Today",
    value: new Date(),
  },
];
const classDay = ref(); //预订日期
const classTime = ref(); //预订时间
const className = ref(); //会议名称
const address = inject('address') //接口地址
const userData = inject('userData') //用户信息

async function bookMeeting() {
  if(!classDay.value && !classTime.value && !className.value) {
    alert('请把信息填写完整！')
    return;
  }
  //设定预定日期和时间
  const bookTime =
    classDay.value.getFullYear() +
    "-" +
    classDay.value.getMonth() +
    "-" +
    classDay.value.getDate() +
    ' ' +
    classTime.value[0].getHours() +
    ":" +
    classTime.value[0].getMinutes(); //预订时间，格式为yyyy-mm-dd hh:mm
  const class_Time = 
    classTime.value[1].getHours() - classTime.value[0].getHours(); //预订时间长度，虽然没什么用
  //预订
  await axios({
    url:address + 'admin/room/book',
    method:'PUT',
    headers:{
      'Content-Type':"application/x-www-form-urlencoded"
    },
    data:{
      bookTime:bookTime,
      class_name:className.value,
      class_Time:class_Time,
      userId:store.state.userData.userId
      // userId:40
    }
  }).then(res => {
    console.log('接口连接成功！',res.data.data)
    alert('预约房间成功！')
    router.push('/')
  }).catch(error => {
    console.error('接口连接失败',error)
  })
}
</script>

<style scoped>
.container {
  width: 800px;
  /* width: 62.5rem; */
  /* height: 44rem; */
  height: 650px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background-color: rgb(245, 245, 245);
  box-shadow: 0px 4px 6px gray;
}
.head {
  width: 85%;
  margin: 0 auto;
}
.head p {
  font-family: 微软雅黑;
  font-size: 20px;
  text-align: center;
}
hr {
  border: 1px solid black;
}
.chioce span {
  font-family: 微软雅黑;
  font-size: 20px;
  position: absolute;
  left: 100px;
  top: 30%;
}
.time span {
  font-family: 微软雅黑;
  font-size: 20px;
  position: absolute;
  left: 100px;
  top: 30%;
}
.name {
  width: 40%;
  height: 40px;
  margin: 0 auto;
  text-align: center;
  font-size: 23px;
}
.name input {
  width: 100%;
  height: 100%;
  background-color: rgb(238, 238, 238);
  border: none;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
}
.chioce {
  padding: 10px;
  position: relative;
}
.time {
  padding: 10px;
  position: relative;
}

.people {
  width: 60%;
  height: 40px;
  margin: 0 auto;
}
.box {
  width: 30%;
  height: 40px;
  margin: 0 auto;
}
.box1 {
  width: 40%;
  height: 40px;
  margin: 0 auto;
}

.other {
  width: 40%;
  height: 40px;
  margin: 0 auto;
}
.footer {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-top: 140px;
}
.footer button {
  width: 20%;
  height: 30px;
  margin: 0 auto;
  background-color: rgb(238, 238, 238);
  font-size: 20px;
  border-radius: 5px;
  display: block;
  border: 1px solid rgb(186, 185, 185);
}
.back {
  height: 1.5625rem;
  margin: 10px;
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}
</style>
